// 集市
<template>
  <div id="market">
    <!-- 头部搜索 -->
    <van-row style="">
      <van-col span="3" style="line-height:54px"
        ><van-icon name="arrow-left"
      /></van-col>
      <van-col span="17">
        <van-search
          v-model="value"
          placeholder="输入商品"
          style="border-radius:8px"
        />
      </van-col>
      <van-col span="4" style="color:red; line-height:54px">搜索</van-col>
    </van-row>
    <!-- 内容 -->
    <van-tabs v-model="active" animated>
      <van-tab title="默认">
        <van-row>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-col
              @click="goods"
              span="12"
              v-for="(item, i) of msgs"
              :key="i"
              class="one"
            >
              <div style="width:100%;margin-top:10px">
                <div>
                  <img
                    :src="item.com_pic"
                    alt=""
                    style="width:100%;border-radius:10px"
                  />
                </div>
                <div class="van-multi-ellipsis--l2" style="font-size:20px">
                  {{ item.com_pass }}
                </div>
                <div class="van-multi-ellipsis--l2" style="margin:0">
                  {{ item.com_title }}
                </div>
                <van-row>
                  <van-col span="12"
                    ><span>￥{{ item.com_price }}</span></van-col
                  >
                  <van-col span="12"
                    ><span class="sold">{{ item.com_Sold }}</span></van-col
                  >
                </van-row>
              </div>
            </van-col>
          </van-list>
        </van-row>
        <!-- <van-col span="12">
                        <div style="margin-top:10px">
                            <div><img src="../store/shoop_006.jpg" alt="" style="width:90%;border-radius:10px"></div>
                            <span style="font-size:20px">下厨房口味捞</span>
                            <p style="margin:0">爽滑莎莎哈哈三大看点是asdasdasdsasadasasd</p>
                            <van-row>
                                <van-col span="12"><span>￥30.00</span></van-col>
                                <van-col span="12"><span>已售</span></van-col>
                            </van-row>
                        </div>
                    </van-col> -->
      </van-tab>
      <van-tab title="销量" @click-tab="getPrice">
        <van-row>
          <van-col
            @click="goods"
            span="12"
            v-for="(item, i) of msgs"
            :key="i"
            class="one"
          >
            <div style="width:100%;margin-top:10px">
              <div>
                <img
                  :src="item.com_pic"
                  alt=""
                  style="width:100%;border-radius:10px"
                />
              </div>
              <span style="font-size:20px"> {{ item.com_pass }}</span>
              <p style="margin:0">{{ item.com_title }}</p>
              <van-row>
                <van-col span="12"
                  ><span>￥{{ item.com_price }}</span></van-col
                >
                <van-col span="12"
                  ><span>{{ item.com_Sold }}</span></van-col
                >
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="价格">
        <van-row>
          <van-col
            @click="goods"
            span="12"
            v-for="(item, i) of msgs2"
            :key="i"
            class="one"
          >
            <div style="width:100%;margin-top:10px">
              <div>
                <img
                  :src="item.com_pic"
                  alt=""
                  style="width:100%;border-radius:10px"
                />
              </div>
              <div class="van-multi-ellipsis--l2" style="font-size:20px">
                {{ item.com_pass }}
              </div>
              <div class="van-multi-ellipsis--l2" style="margin:0">
                {{ item.com_title }}
              </div>
              <van-row>
                <van-col span="12"
                  ><span>￥{{ item.com_price }}</span></van-col
                >
                <van-col span="12" class="dad"
                  ><span>{{ item.com_Sold }}</span></van-col
                >
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="评分">
        <van-row>
          <van-col span="12" v-for="(item, i) of msgs" :key="i" class="one">
            <div style="width:100%;margin-top:10px">
              <div>
                <img
                  :src="item.com_pic"
                  alt=""
                  style="width:100%;border-radius:10px"
                />
              </div>
              <span style="font-size:20px"> {{ item.com_pass }}</span>
              <p style="margin:0">{{ item.com_title }}</p>
              <van-row>
                <van-col span="12"
                  ><span>￥{{ item.com_price }}</span></van-col
                >
                <van-col span="12"
                  ><span>{{ item.com_Sold }}</span></van-col
                >
              </van-row>
            </div>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
    <myfooter></myfooter>
  </div>
</template>
<style scoped>
.one:nth-child(2n + 1) {
  padding-left: 10px;
  padding-right: 5px;
}
.one:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}
.sold {
  position: fixed;
  right: 10px;
}
.dad {
  position: relative;
}
</style>
<script>
export default {
  data() {
    return {
      active: "",
      value: "",
      msgs: [],
      finished: "",
      loading: "",
      msgs2: [],
    };
  },
  methods: {
    goods() {
      // this.$router.push('/goodsAction')
      this.$router.push("/goodsAction");
    },
    // 获取数据库商品信息 默认
    getCommodity(cid) {
      this.axios.get("/commodity/list/" + cid).then((res) => {
        // console.log(res);

        this.msgs = res.data.msg;
        // console.log(this.msgs);

        this.msgs.forEach((item) => {
          //   console.log(item.com_pic);

          if (item.com_pic != null) {
            item.com_pic = require("../assets" + item.com_pic);
            //../assets/img/commodity/shoop_001.jpg
          }
        });
      });
    },
    // 价格
    getPrice(cid) {
      this.axios.get("/commodity/price/" + cid).then((res) => {
        //console.log(res);
        // console.log(res.data.msg[0].com_title);
        this.msgs2 = res.data.msg;
        //console.log(this.msgs2)
        //this.pic=res.data.msg.com_pic;
        this.msgs2.forEach((item) => {
          if (item.com_pic != null) {
            item.com_pic = require("../assets" + item.com_pic);
            //console.log(i.com_pic);
            //   ../assets/img/commodity/shoop_001.jpg
          }
        });
      });
    },
    onLoad() {},
  },
  mounted() {
    this.getCommodity(1);
    this.getPrice(1);
  },
  watch: {},
};
</script>

<div class="van-multi-ellipsis--l2">
</div>
